<template>
  <span
    class="my-link text-line-1"
    :class="[underline?'textUnderLine':'']"
    @click="handleClick"
  >
    <slot />
  </span>
</template>

<script>
import { reactive, toRefs } from 'vue'

export default {
  props: {
    underline: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['click'],
  setup(props, context) {
    const state = reactive({
      count: 0,
    })
    const handleClick = () => {
      context.emit('click')
    }

    return {
      ...toRefs(state),
      handleClick,
    }
  },
}
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";
.my-link {
  white-space: nowrap;
  color: $main-color;
  &.textUnderLine {
    text-decoration: underline;
  }
  &:hover {
    cursor: pointer;
  }
}
</style>
